// 首页的业务逻辑
const offBox = document.querySelector('.off')
const onBox = document.querySelector('.on')
const nickBox = document.querySelector('.nickname')

const id = window.localStorage.getItem('id')

// 1. 登录验证
testLogin()
function testLogin() {
  // 1-1. 拿到用户的 id 和 token
  const token = window.localStorage.getItem('token')
  if (!id || !token) {
    // 没有登录过
    offBox.classList.add('active')
    onBox.classList.remove('active')
    return
  }
  // 1-3. 发送请求, 请求用户详细信息
  const xhr = new XMLHttpRequest()
  xhr.open('GET', 'http://localhost:8888/users/info?id=' + id)
  xhr.onload = function () {
    const res = JSON.parse(xhr.responseText)
    if (res.code === 1) {
      nickBox.innerHTML = res.info.nickname
      onBox.classList.add('active')
      offBox.classList.remove('active')
    }
  }

  // 设置请求头
  xhr.setRequestHeader('authorization', token)
  xhr.send()
}
// 3. 退出的操作
const outBtn = document.querySelector('.logout')
outBtn.onclick = () => {
  // 执行退出登录的操作
  // 3-1. 确认是否真的退出
  if (!window.confirm('您确定退出登录吗 ?')) return

  // 3-2. 执行退出
  // 把 localStorage 内的内容删除
  window.localStorage.removeItem('token')
  window.localStorage.removeItem('id')

  // 3-2. 发送请求到服务器
  // 让服务器把这个 token 立即过期
  ajax({
    url: 'http://localhost:8888/users/logout',
    data: 'id=' + id,
    success () {
      // 刷新页面
      window.location.reload()
    }
  })
}


// 轮播图
var mySwiper = new Swiper ('.swiper-container', {
  loop: true,
  autoplay: {
    delay: 3000,
    disableOnInteraction: false,
    pauseOnMouseEnter: true,
  },

  pagination: {
    el: '.swiper-pagination',
  },
  
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
})
// 二级菜单
const sideMenuScroll = document.querySelector('.side-menu-scroll')
const menuMain = document.querySelector('.menuMain')
const sideMenu = document.querySelector('.side-menu')
const menuPanel = document.querySelector('.menu-panel')
const sideMenuscroll = document.querySelector('.side-menu-scroll')
let k = 0

getInfo()
async function getInfo() {
const res = await pAjax({
  url: '/rzsht1',
  dataType: 'json'
})
let str = `
      <p class="menuTitle">${res.data[k].name}</p>
      <ul>
      `
        res.data[k].productDetailss.forEach(item => {
          str += `
          <li>
            <img src="${item.url}" alt="">
            <span>${item.title}</span>
          </li>`
    })
    str += `</ul>`
menuMain.innerHTML = str
}

sideMenu.addEventListener('mouseover', e => {
  e = e
  const target = e.target 
  menuPanel.style.display = 'block'
  if (target.nodeName === 'LI'){
    k = target.dataset.zzc
    sideMenuscroll.children[k].style.backgroundColor = '#F7F8FA'
  }
  // console.log(k) 
  getInfo()
})

sideMenu.addEventListener('mouseout',e => {
  e = e
  const target = e.target
  if (target.nodeName === 'LI'){
    sideMenuscroll.children[k].style.backgroundColor = '#FFFFFF'
  }
  menuPanel.style.display = 'none'
})
// 登录注册区

// 抢购区
const seckills = document.querySelector('.seckill')
const seckrights = document.querySelector('.seckrightss')
let jg = 0 
getSeckill()
async function getSeckill() {
  const res = await pAjax({
    url: '/qianggou?currentPage=1&pageSize=4',
    dataType: 'json'
  })
  console.log(res.data)
  let str = ``
   res.data.detail.forEach( item => {
    str += `
    <li>
      <div class="planimg">
        <img src="${item.url}" alt="">
      </div>
      <h3>${item.title}</h3>
      <div class="border">
        <div class="jindu"></div>
        <p>已抢0%</p>
      </div>
      <div class="plan">
        <p> <span> ￥${item.price} </span> <span>${item.originalPrice}</span></p>
      <div>${item.buttonStatusDesc}</div>
      </div>
    </li>`
    
  })
  seckrights.innerHTML = str
}






// 热卖专区
const hottimes = document.querySelector('.hottime')
const hotright = document.querySelector('.hot_right')
let hotsss= 0 
getHot()
async function getHot() {
  const res = await pAjax({
    url: '/hot',
    dataType: 'json'
  })
  console.log(res.data)
  let str = ``
  res.data[hotsss].productDetailss.forEach( item => {
  str +=`
    <li>
      <div class="hot_left" style="background-image: url(${item.url});">
        
      </div>
      <div class="hot_right">
        <p>${item.title}</p>
        <p>${item.secondTitle}</p>
        <p>￥${item.price}</p>
      </div>
      <div class="righttop">${item.productDetailLabelss[0].name}</div>
    </li>
  `
})
hotright.innerHTML = str
}
//OPPO 专区 
const opponics = document.getElementById('oppozhuan')
const oppoBox = document.getElementById('oppolie')
const oppotu = document.getElementById('oppoqu')
const categoryTabS = document.querySelectorAll('.oppolist > li')
const categoryTab = document.querySelector('.oppolist')
let oppos = 0 
getLoppo()
async function getLoppo() {
  const res = await pAjax({
    url: '/hotoppo',
    dataType: 'json'
  })
  
  let str = ``
  console.log(res.data)
  str += `
    <div>
      <img src="${res.data[oppos].url}" alt="">
    </div>
    `
for (let i = 1; i <= 3; i++) {
    str +=`
      <li>
        <img src="${res.data[oppos].productDetailss[i].url}" alt="">
        <p>${res.data[oppos].productDetailss[i].title}</p>
        <p><span>积分抵200</span></p>
        <p>￥${res.data[oppos].productDetailss[i].price}</p>
      </li>
    `}
  oppotu.innerHTML=str
  
}
categoryTab.addEventListener('click', e => {
  e = e
  const target = e.target
  if (target.className === 'categoryTab') {
    categoryTabS.forEach (item => {
      item.classList.remove('active')
    })
    target.classList.add('active')
    oppos = target.id
  }
  getLoppo()
})
// One plus 专区 
const oneplusnic = document.getElementById('oneplus')
const oneplusLi = document.getElementById('onepluslist')
const oneplusIm = document.getElementById('oneplusimg')
let onep = 0
getOneplus()
async function getOneplus() {
  const res = await pAjax({
    url: '/puls',
    dataType: 'json'
  })
  console.log(res.data)
  let str = ``
  res.data[onep].productDetailss.forEach( item => {
    str +=`
      <li><a href="">${item.title}</a></li>
    `
  })
  oneplusLi.innerHTML=str
}
let plus = 0 
getLpuls()
async function getLpuls() {
  const res = await pAjax({
    url: '/onepuls',
    dataType: 'json'
  })
  console.log(res.data)
  let str = `<div>
  <img src="${res.data[plus].url}" alt="">
  </div>
`
  res.data[plus].productDetailss.forEach( item => {
    str +=`
      <li>
        <img src="${item.url}" alt="">
        <p>${item.title}</p>
        <p><span>${item.activityList[0].activityInfo}</span> <span></span></p>
        <p>￥${item.price}</p>
      </li>
    `
  })
  oneplusIm.innerHTML=str
}

//realme 专区
const realems = document.getElementById('realme')
const realmelists = document.getElementById('realmelist')
const realmeuls = document.getElementById('realmeul')
let r = 0
getRealmeout()
async function getRealmeout() {
  const res = await pAjax({
    url: '/move',
    dataType: 'json'
  })
  console.log(res.data)
  let str = ``
  res.data[r].productDetailss.forEach( item => {
    str +=`
      <li><a href="">${item.title}</a></li>
    `
  })
  realmelists.innerHTML=str
}
let rs = 0 
getRemoveover()
async function getRemoveover() {
  const res = await pAjax({
    url: '/remove',
    dataType: 'json'
  })
  console.log(res.data)
  let str = `<div>
  <img src="${res.data[rs].url}" alt="">
  </div>
`
  res.data[rs].productDetailss.forEach( item => {
    str +=`
      <li>
        <img src="${item.url}" alt="">
        <p>${item.title}</p>
        <p><span>${item.activityList[0].activityInfo}</span> <span></span></p>
        <p>￥${item.price}</p>
      </li>
    `
  })
  realmeuls.innerHTML=str
}
// 智能好物
// const haoBox = document.getElementById('haowu')
// const haowuBox = document.getElementById('halowuul')
// const haoimgBox = document.getElementById('haowuimg')
// let h = 0
// gethaowuout()
// async function gethaowuout() {
//   const res = await pAjax({
//     url: '/wu',
//     dataType: 'json'
//   })
//   console.log(res.data)
//   let str = ``
//   res.data[h].productDetailss.forEach( item => {
//     str +=`
//       <li><a href="">${item.title}</a></li>
//     `
//   })
//   haowuBox.innerHTML=str
// }
// let hs = 0 
// gethaowuover()
// async function gethaowuover() {
//   const res = await pAjax({
//     url: '/haowu',
//     dataType: 'json'
//   })
//   console.log(res.data)
//   let str = `<div>
//   <img src="${res.data[rs].url}" alt="">
//   </div>
// `
//   res.data[hs].productDetailss.forEach( item => {
//     str +=`
//       <li>
//         <img src="${item.url}" alt="">
//         <p>${item.title}</p>
//         <p><span>${item.activityList.activityInfo}</span> <span></span></p>
//         <p>￥${item.price}</p>
//       </li>
//     `
//   })
//   haoimgBox.innerHTML=str
// }







// 潮流好物

const chaoliuBox = document.getElementById('chaoliu')
const chaoliulistBox = document.getElementById('chaoliulist')
const chaoliuimgBox = document.getElementById('chaoliuimg')
let c = 0
getchaoout()
async function getchaoout() {
  const res = await pAjax({
    url: '/liu',
    dataType: 'json'
  })
  console.log(res.data)
  let str = ``
  res.data[c].productDetailss.forEach( item => {
    str +=`
      <li><a href="">${item.title}</a></li>
    `
  })
  chaoliulistBox.innerHTML=str
}
let cs = 0 
getchaoover()
async function getchaoover() {
  const res = await pAjax({
    url: '/chaoliu',
    dataType: 'json'
  })
  console.log(res.data)
  let str =``
  res.data[cs].productDetailss.forEach( item => {
    str +=`
      <li>
        <img src="${item.url}" alt="">
        <p>${item.title}</p>
        <p><span>${item.activityList[0].activityInfo}</span> <span></span></p>
        <p>￥${item.price}</p>
      </li>
    `
  })
  chaoliuimgBox.innerHTML=str
}